<template>
	<!-- pc -->
	<view v-if="DeviceType == 'pc'">

		<view class="flex-col">
			<view class="hsc" style=" overflow-x: auto;  max-width: 90%;  margin: 0px auto 10px;  ">
				<view class="flex items-center" style="margin-right: 20px;padding-bottom: 5px;">
					<!-- <text v-for="item in SuggestList" @click="(this.input = item), sendmsg('pc')" style="
			                cursor: pointer;
			                font-size: 12px;
			                color: #212121;
			                margin-right: 10px;
			                padding: 5px 10px;
			                border: 1px solid #eee;
			                border-radius: 36px;
			                background: #fff;
			                white-space: nowrap;
			                box-shadow: 0px 0px 3px #eee; 
			            ">{{ item}}</text> -->
						<text v-for="item in SuggestList" @click="(this.input = item.title), sendmsg('pc')" style="
									                cursor: pointer;
									                font-size: 12px;
									                color: #fff;
									                margin-right: 10px;
									                padding: 5px 10px;
									               
									                border-radius: 36px;
									                background: rgb(122,127,139,0.5);
									                white-space: nowrap;
									                box-shadow: 0px 0px 3px #eee;
									            ">{{ item}}</text>
				</view>
			</view>
			<view class="flex items-center w-full" style="position: relative;margin-top: auto;">
				<input class="w-full" v-model="input" @keydown="sendEnter($event)"
					style="background: #FFFFFF;border-radius: 22px 22px 22px 22px;border: 1px solid #ECEFF3;font-size: 12px;padding: 0 40px 0 20px;max-height:44px;height: 44px;"
					type="text" placeholder="请描述您的问题" />

				<view @click="sendmsg('pc')" class="sendicon"	style="position: absolute;right: 15px;width: 20px;cursor:pointer;height: 20px;">
				</view>
			</view>
			<!-- <text style="margin: 5px auto 0px;color: #333;font-size: 10px;">中犇教育科技技术支持</text> -->
		</view>
	</view>
	<!-- 竖屏 -->
	<view class='flex-col 123' v-if="DeviceType == 'AdvertisingMachine' " style="margin-top: auto;">

		<view class="hsc" style="overflow-x: auto;max-width: 90%;margin: 0px auto 10px;">
			<view class="flex  items-center" style="margin-right: 20px;">
				<text v-for="item in SuggestList" @click="(this.input = item,sendmsg())"
					style="cursor: pointer;font-size: 14px;color:#FFF;margin-right: 10px;padding:5px 10px;border:1px solid #fff;border-radius: 36px;background: rgba(0,0,0,0.5);white-space: nowrap;">{{item}}</text>
			</view>
		</view>
		<view class="flex items-center" style="padding:0 30px">
			<view class="">
				<!-- <image @click="currentMethod = 'voice'" v-if="currentMethod !== 'voice'"
					style="min-width: 40px;width: 40px;height: 40px;cursor:pointer;margin-right:12px;"
					src="../static/voicewx.png" mode="">
				</image>
				<image @click="currentMethod = 'keyboard'" v-else
					style="min-width: 40px;width: 40px;height: 40px;cursor:pointer;margin-right:12px;"
					src="../static/keyboard.png" mode="">
				</image> -->
			</view>
			<view class="w-full" style="padding-bottom: 4px;">
				<view v-if="currentMethod !== 'voice'" class="w-full flex items-center" style="background: linear-gradient( 180deg, #F4F9FF 0%, #D3E7FF 100%);
				box-shadow: inset 0px 6px 8px 1px rgba(120,175,249,0.68);
				border-radius: 36px;
				border: 1px solid #FFFFFF;height:40px;position: relative;">
					<view class="flex items-center w-full">
						<view class="flex items-center w-full" style="position: relative;">
							<input class="w-full wxinput " :adjust-position="false" v-model="input"
								style="font-weight: 400;font-size: 14px;color: #666;border-radius: 22px;padding: 0 50px 0 15px;max-height:40px;height: 44px;"
								type="text" placeholder="很高兴为您服务,请描述您的问题" />
						</view>
						<view @click="sendmsg('AM')" class="sendicon"
							style="position: absolute;right: 15px;width: 20px;cursor:pointer;height: 20px;">
						</view>
					</view>

				</view>
				<!-- <view v-else class="w-full" style="padding-bottom: 0px;">
					<RecorderButton device='wx' />
				</view> -->
			</view>
		</view>
	</view>


	<!-- wx -->
	<view class='flex-col ' v-if="DeviceType == 'wx'">
		<view class="hsc" style="overflow-x: auto;max-width: 90%;margin: 0px auto 10px;">
			<view class="flex  items-center" style="margin-right: 20px;">
				<text v-for="item in SuggestListS" @click="(this.input = item.title,sendmsg('wx'))"
					style="cursor: pointer;font-size: 14px;color:#FFF;margin-right: 10px;padding:5px 10px;border:1px solid #fff;border-radius: 36px;background: rgba(0,0,0,0.5);white-space: nowrap;">{{item.title}}</text>
			<!-- 	<text v-for="item in SuggestList" @click="(this.input = item,sendmsg())"
					style="cursor: pointer;font-size: 14px;color:#FFF;margin-right: 10px;padding:5px 10px;border:1px solid #fff;border-radius: 36px;background: rgba(0,0,0,0.5);white-space: nowrap;">456{{item}}</text> -->
			</view>
		</view>
		<view class="flex items-center" style="padding: 0 16px;">
			
			<view class="w-full" style="padding-bottom: 8px;">
				<view v-if="currentMethod !== 'voice'" class="w-full flex items-center" style="background: linear-gradient( 180deg, #F4F9FF 0%, #D3E7FF 100%);
				box-shadow: inset 0px 6px 8px 1px rgba(120,175,249,0.68);
				border-radius: 36px;
				border: 1px solid #FFFFFF;height:40px;position: relative;">
					<view class="flex items-center w-full">
						<view class="flex items-center w-full" style="position: relative;">
							<input class="w-full wxinput " :adjust-position="false" v-model="input"
								@confirm="sendmsg('wx')" confirm-type='send'
								style="font-weight: 400;font-size: 14px;color: #666;border-radius: 22px;padding: 0 50px 0 15px;max-height:30px;height: 30px;"
								type="text" placeholder="请描述您的问题" />
						</view>
						<!-- <view @click="sendmsg('wx')" class="sendicon"
							style="position: absolute;right: 15px;width: 20px;cursor:pointer;height: 20px;">
						</view> -->
					</view>

				</view>
				<view v-else class="w-full" style="padding-bottom:px;">
					<RecorderButton device='wx' />
				</view>
			</view>
			<view class="" style="margin-top: 2px;">
				<image @click="currentMethod = 'voice'" v-if="currentMethod !== 'voice'"
					style="min-width: 40px;width: 40px;height: 40px;cursor:pointer;margin-left:12px;"
					src="../static/voicewx.png" mode="">
				</image>
				<image @click="currentMethod = 'keyboard'" v-else
					style="min-width: 40px;width: 40px;height: 40px;cursor:pointer;margin-left:12px;"
					src="../static/keyboard.png" mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		useConversationStore
	} from '../store/index.js'
	import RecorderButton from "@/components/RecorderButton.vue"
	import {
		member_id,
		ProBaseUrl
	} from '../common/config.js';
	const conversationStore = useConversationStore();
	export default {
		name: "sendinput",
		props: {
			DeviceType: {
				type: String
			}

		},
		components: {
			RecorderButton
		},
		data() {
			return {
				input: '',
				messageType: '',
				currentMethod: 'keyboard',
				kjylist:[]
			};

		},
		mounted() {
			
			console.log('DeviceTypeDeviceTypeDeviceTypeDeviceType', this.DeviceType)
			if (this.DeviceType && this.DeviceType == 'AdvertisingMachine') {
				conversationStore.message_suggestedList = []
			}
			this.$eventBus.$on('sendItem', (e) => {
				this.input = e.data
				this.messageType = e.type
				// this.currentMethod = 'keyboard'
				this.sendmsg()
			})
			// 获取快捷问题
			this.getjjy()
			this.getConverstationList()
		},
		beforeDestroy() {
			this.$eventBus.$off('sendMessage')
		},
		computed: {
			SuggestList() {
				console.log(conversationStore.message_suggestedList)
				return conversationStore.message_suggestedList
			},
			SuggestListS() {
				console.log('888888888888888888888888===================')
				console.log(conversationStore.messageList) 
				return conversationStore.messageList
			}
		},
		methods: {
			 getjjy() {
				 // return 
				 console.log('************************************')
				 uni.request({
				 	url:'https://yufabu.saizhuge.net/api/m4037/6848fc0cb05f6',
					method:'GET',
					success(res) {
						console.log(res)
						console.log(res.data.data)
						this.kjylist=res.data.data
						// this.kjylist.push(...res.data.data)
						conversationStore.messageList=this.kjylist
						 console.log('************************************')
					},
					fail(err) {
						console.log(err)
					}
				 })
			// 	let datauserInfo = await this.$api.get('https://yufabu.saizhuge.net/api/m4037/6848fc0cb05f6', {
			// 		// user_id: uni.getStorageSync('USER_INFO_7863').aid
			// 	});
			
			// 	if (datauserInfo.data.code != 1) {
			// 		this.$message.info(datauserInfo.data.msg);
			// 		return
			// 	}
			// 	let infouserInfo = datauserInfo.data;
			// 	this.user = infouserInfo.data
			
			},
			sendEnter(e) {

				if (e.code == 'Enter') {
					this.sendmsg()
				}
			},
			pausedSZR() {
				this.$eventBus.$emit('stop')
			},
			getConverstationList() {
				fetch(`${ProBaseUrl}/api/v1/681d77db9d7b3?member_id=${member_id}`).then(res => res.json()).then(
					res1 => console.log('res1', res1))
			},
			postMessageToApp(data) {
				console.log(parent)
				parent.postMessage(data, '*')
			},

			sendmsg(type) {
				
				this.isjiaoliu=false
				
				if (!this.input || this.input.trim() === '') return
				this.$eventBus.$emit("hiddenzwjs")
				if (type == 'AM') {
					// this.$eventBus.$emit("hiddenWrap")
				}
				if (this.messageType == 'AM') {
					// this.$eventBus.$emit("hiddenWrap")
				}

				const conversationStore = useConversationStore()
				const id = new Date().getTime()

				console.log('conversationStore.Speaking', conversationStore.Speaking)
				console.log(' 如果正在说话，')
				// 如果正在说话，不发送消息
				// if (conversationStore.Speaking) return
				// conversationStore.ChangeSpeaking(true)
				// 发送消息
				// conversationStore.sendMessage(this.input, id)

				// H5_SZR_VOICE_MESSAGE
				this.$eventBus.$emit('sendMessage', {
					type: 'H5_SZR_INSTRUCT',
					id,
					detail: {
						code: 3,
						value: this.input
					},
					source: type
				})
				this.input = ''
				this.$eventBus.$emit('scrollBottom')
			}
		}
	}
</script>

<style>
	.uni-input-placeholder {
		color: #666 !important;
		font-size: 13px !important;
	}

	.sendicon {
		background: url('~@/static/send.png') center center / 100% 100% no-repeat;
	}

	/* .sendicon: {
		background: url('~@/static/sendactive.png') center center / 100% 100% no-repeat;
	} */

	.chatother {
		margin-left: 0 !important;
	}

	.wxsend {
		background: url('~@/static/wxsend.png') center center / 100% 100% no-repeat;
	}

	:deep(.top-edge) {
		display: none !important;
	}
</style>